<template>
    <div id="code">
        <pheader :text="this.text1" ></pheader>
        <div class="code-box">
            <div class="code-inp">
                <input type="text" placeholder="请输入兑换码" v-model="redCode"/>
            </div>
            <div class="code-btn btn1" @click="codeBtn()">立即使用</div>
            <div class="title">
                <span class="xian"></span>
                <span class="xing"></span>
                <span class="text">使用说明</span>
                <span class="xing"></span>
                <span class="xian"></span>
            </div>
            <div class="hintShow">
                <p>1、兑换码由平台生成并分发</p>
                <p>2、一个兑换码只能使用一次</p>
                <p>3、同类型的兑换码用户可以叠加使用</p>
            </div>
        </div>
        <div class="hintYes" v-if="hintY">
            <div class="hint-top"><i class="iconfont icon-icon_right"></i></div>
            <p>兑换成功</p>
        </div>
        <div class="hintNo" v-if="hintN">
            <div class="hint-top"><i class="iconfont icon-wrong"></i></div>
            <p v-if="codeNohas">该兑换码不存在</p>
            <p v-if="codeRe">该兑换码已使用</p>
            <p v-if="codeDi">不可兑换低等级</p>
        </div>
    </div>
</template>

<script>
    import {service} from '../../service/service'
    import {commonService} from '../../service/commonService'
    import {common} from '../../assets/js/common/common'
    export default {
        data () {
            return {
                text1: '兑换码',
                redCode:'',
                hintY:false,
                hintN:false,
                codeNohas:false,
                codeRe:false,
                codeDi:false,
                shopid:'',
            }
        },
        mounted: function() {
            let that = this;
            document.title="兑换码"
            let code = that.$route.params.codeId;
            if(code){
                that.redCode = code;
            }else{
                that.redCode = '';
            }
        },
        methods:{
            postCode:function(codeId){
                let that = this;
                commonService.getCode({'keyNo':codeId}).then(function(res){
                    if(res.data.code === 526101 || res.data.code === 524101){
                        that.hintN = true;
                        that.codeNohas = true;
                    }
                    if(res.data.code === 526102 || res.data.code === 524102){
                        that.hintN = true;
                        that.codeNohas = true;
                    }
                    if(res.data.code === 526103 || res.data.code === 524102){
                        that.hintN = true;
                        that.codeRe = true;
                    }
                    if(res.data.code === 526105 || res.data.code === 524105){
                        that.hintN = true;
                        that.codeDi = true;
                    }
                    if(res.data.code === 510100){//没有登录
                        let ua = window.navigator.userAgent.toLowerCase();
                        if(ua.match(/MicroMessenger/i)=="micromessenger") {
//                          这里是微信浏览器
                            loginService.getOauth({loginType: 'WEIXIN', platform: 'WXH5',jumpRouter:'wxcode',wxscope:'snsapi_base'}).then(function (res) {
                                window.location.href = res.data.datas;
                            })
                        } else {
//                          这里不是微信浏览器
                            that.$router.push({name:'vipPhone',params:{code:that.redCode}})
                        }
                    }
                    if(res.data.code === 200){
                        that.hintY = true;
                        window.localStorage.removeItem('codeId');
                        setTimeout(function(){
                            that.$router.push({name:'vip'})
                        },500)
                    }
                })
            },
            codeBtn:function(){
                let that = this;
                if(that.hintY || that.hintN){
                    that.hintY = false;
                    that.hintN = false;
                    that.codeNohas = false;
                    that.codeRe = false;
                    that.codeDi = false;
                }
                window.localStorage.setItem('codeId',that.redCode);
                that.postCode(that.redCode);
            }
        },
    }
</script>

<style lang="less">
@import url('../../assets/css/theme.less');
#code {
    width:100%;
    height:100%;
    position:absolute;
    background: #fff;
    .purchased-top{
        box-shadow: inset 0 -1px 0 0 rgba(221,221,221,0.50);
    }
    .code-box{
        width:100%;
        padding:0.8rem 0.53rem;
        box-sizing: border-box;
        background:#fff;
        .code-inp{
            width:100%;
            height:1.2rem;
            background: #F9F9F9;
            border-radius: 50px;
            input{
                width:100%;
                height:1.2rem;
                background: #F9F9F9;
                border-radius: 50px;
                border: none;
                outline: none;
                font-size: 14px;
                color: #333333;
                text-align: center;
            }
            input::-webkit-input-placeholder { /* WebKit browsers */
                color:#BBBBBB;
            }
            input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color:#BBBBBB;
            }
            input::-moz-placeholder { /* Mozilla Firefox 19+ */
                color:#BBBBBB;
            }
            input:-ms-input-placeholder { /* Internet Explorer 10+ */
                color: #BBBBBB;
            }
        }
        .code-btn{
            width:100%;
            height:1.2rem;
            line-height:1.2rem;
            background: #6699FF;
            border-radius: 100px;
            margin:0.8rem 0;
            text-align: center;
            color:#fff;
            font-size: 16px;
        }
    }
    .title{
        width:100%;
        padding:0.36rem 1.06rem 0.45rem 1.06rem;
        box-sizing: border-box;
        text-align: center;
        .xian{
            width:0.8rem;
            display: inline-block;
            border:1px solid #C0CCDA;
            margin-bottom: 0.1rem;
        }
        .xing{
            width:0.1rem;
            height:0.1rem;
            border-radius: 25px;
            display: inline-block;
            border:1px solid #C0CCDA;
            margin-bottom: 0.03rem;
        }
        .text{
            font-size: 16px;
            color: #5E6D82;
            margin:0 0.3rem;
        }
    }
    .hintShow{
        font-size: 14px;
        color: #5E6D82;
        line-height: 0.56rem;
    }
    .hintYes{
        width:2.67rem;
        height:2.6rem;
        background:#fff;
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
        border-radius: 4px;
        .hint-top{
            width:100%;
            padding:0.4rem;
            text-align: center;
            box-sizing: border-box;
            i{
                font-size:30px;
                color:#13CE66;
            }
        }
        p{
            font-size: 14px;
            color: #475669;
            letter-spacing: 0;
            text-align: center;
        }
    }
    .hintNo{
        width:3.3rem;
        height:2.6rem;
        background:#fff;
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
        border-radius: 4px;
        opacity: 0;
        animation: show 2s ease 0s;
        .hint-top{
            width:100%;
            padding:0.4rem;
            text-align: center;
            box-sizing: border-box;
            i{
                font-size:30px;
                color:#EA5B5B;
            }
        }
        p{
            font-size: 14px;
            color: #475669;
            letter-spacing: 0;
            text-align: center;
        }
    }
    @keyframes show{
        0%{
            -webkit-transform: scale(.1);
            -moz-transform: scale(.1);
            -o-transform: scale(.1);
            -ms-transform: scale(.1);
            transform: scale(.1);
            opacity: 0;
        }
        25%{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
        90%{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
        100%{
            -webkit-transform: scale(2);
            -moz-transform: scale(2);
            -o-transform: scale(2);
            -ms-transform: scale(2);
            transform: scale(2);
            opacity: 0;
        }
    }
}
</style>